<template>
  <div class="component-user-info">
    <el-dialog
      v-model="visible"
      :title="$t('distributionMsg.titleTip1')"
      :close-on-click-modal="false"
      width="570px"
      @before-close="close"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        :label-width="$t('language') === 'language' ? '180px' : '100px'"
        @submit.prevent
        @keyup.enter="onSubmit()"
      >
        <el-form-item
          :label="$t('distributionMsg.distriTelPhone')"
          prop="remarks"
        >
          <el-input
            v-model="dataForm.userMobile"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          :label="$t('distribution.idCardNo')"
          prop="identityCardNumber"
        >
          <el-input
            v-model="dataForm.identityCardNumber"

            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          :label="$t('distribution.realName')"
          prop="realName"
        >
          <el-input
            v-model="dataForm.realName"

            :disabled="true"
          />
        </el-form-item>

        <el-form-item
          :class="{'english':$t('language')==='English'}"
          :label="$t('distribution.personalInfo')"
        >
          <div
            v-if="infoList.length"
            class="pic-con"
          >
            <div
              v-for="(pic, index) in infoList"
              :key="index"
              class="pic-item"
            >
              <el-image
                :src="checkFileUrl(pic.srcLink)"
                :preview-src-list="checkFileUrl(srcList)"
              />
              <span>{{ pic.title }}</span>
            </div>
          </div>
          <span v-else>{{ $t('distribUserWallet.nothing') }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div
            class="default-btn"
            @click="close()"
          >
            {{ $t('seckill.close') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
const dataRule = {}
const dataForm = ref({})
const visible = ref(false)
const srcList = ref([])
const infoList = ref([])
const dataFormRef = ref(null)
const init = (data) => {
  visible.value = true
  nextTick(() => {
    dataFormRef.value?.resetFields()
  })
  dataForm.value = Object.assign(dataForm.value, data)
  const infoLists = []
  if (dataForm.value.identityCardPicFront) {
    infoLists.push({
      title: $t('distributionMsg.idCardFront'),
      srcLink: dataForm.value.identityCardPicFront
    })
  }
  if (dataForm.value.identityCardPicBack) {
    infoLists.push({
      title: $t('distributionMsg.idCardBack'),
      srcLink: dataForm.value.identityCardPicBack
    })
  }
  if (dataForm.value.identityCardPicHold) {
    infoLists.push({
      title: $t('distributionMsg.holdIdCard'),
      srcLink: dataForm.value.identityCardPicHold
    })
  }
  infoList.value = infoLists
  if (infoLists.length) {
    for (let i = 0; i < infoLists.length; i++) {
      const element = infoLists[i]
      srcList.value.push(element.srcLink)
    }
  }
}
defineExpose({ init })

const close = () => {
  visible.value = false
  dataForm.value = {}
}
</script>

<style lang="scss" scoped>
.component-user-info :deep(.el-dialog__body) {
  padding-bottom: 0;
}
.component-user-info .english :deep(.el-form-item__label) {
  word-break:break-word
}
.pic-con {
  display: flex;
  .pic-item {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    :deep(.el-image) {
      width: 80px;
      height: 80px;
    }
    span {
      font-size: 14px;
      color: #999;
    }
  }
}
.component-user-info :deep(.el-dialog__body) {
  padding-bottom: 0;
}
.pic-con {
  display: flex;
  .pic-item {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    :deep(.el-image) {
      width: 80px;
      height: 80px;
    }
    span {
      font-size: 14px;
      color: #999;
    }
  }
}
</style>
